<script setup>
import api from '../../api/venue.js';
import {ref,onMounted} from "vue";
import {ElMessageBox} from "element-plus";
import lodash from 'lodash'


//定义绑定的数据
//表格中的数据
const tableData=ref([]);

const total=ref(0);
//定义对话框的显示状态
const editWinVisible=ref(false);
//查询数据
const searchObj=ref({
  current:1,
  size:10,
  venueName:'',
  address:'',
  maxCapacity:'',
  seatMap:'',
});

//要修改或者新增的数据
const obj=ref({});

const search = async ()=>{
  var result=await api.page(searchObj.value);
  console.log('接口返回结果：', result);

  tableData.value= result.records||[];
  total.value=result.total||0;
}
//页面加载后要挂载的数据
onMounted(async()=>{
  search();
});
//定义方法
const handleUploadSuccess = (response, file) => {
  obj.value.photo=response.data;
}

const handleSizeChange = () => {
  search();
}
const  handleCurrentChange= () => {
  search();
}

const handlerSearch = ()=> {
  searchObj.value.current=1;
  search();
}
const handlerAdd = async () => {
  obj.value = {
  };
  editWinVisible.value = true;
}


const editCancel = () => {
  obj.value = {};//清空数据
  editWinVisible.value = false;//关闭对话框
}
const editCommit = async () => {
  // 判断是新增还是编辑（根据是否有id判断）
  if (obj.value.id) {
    // 编辑
    await api.edit(obj.value);
  } else {
    // 新增
    await api.add(obj.value);
  }
  search(); // 刷新表格
  editWinVisible.value = false; // 关闭对话框
}

const handleEdit = (index, row) => {
  obj.value=lodash.clone(row);
  editWinVisible.value=true;
  console.log(index, row)
}
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定要删除该行数据吗?',
      '删除提示',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        api.del(row.id);
        //重新加载数据
        //设置页从第一页开始查询
        searchObj.value.current=1;
        search();
      })

      .catch(() => {

      })
}

</script>
<template>
<!--  <div style="margin-top: 110px; padding: 0 20px;">-->

<!--    <el-card class="form-container">-->
<!--      <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-top: 10px;">-->
<!--        <el-form-item label="场馆名称">-->
<!--          <el-input v-model="searchObj.venueName" placeholder="请输入场馆名称" clearable />-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <el-form :inline="true" style="display: flex; justify-content: center; gap: 20px;">-->
<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="handlerSearch">查询</el-button>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="handlerAdd">新添</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </el-card>-->

    <div style="margin-top: 110px; padding: 0 20px;">
      <el-card class="form-container">
        <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-top: 20px;margin-left: 10px">
          <el-row :gutter="20" align="middle">
            <el-col :span="7" style="text-align: right;">
              <el-form-item label="场馆名称">
                <el-input v-model="searchObj.venueName" placeholder="请输入场馆名称" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="8" style="text-align: left;">
              <el-form-item>
                <el-button type="primary" @click="handlerSearch">查询</el-button>
                <el-button type="primary" @click="handlerAdd" style="margin-left: 10px;">新添</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>


    <el-card class="table-container">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="场馆名称" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.venueName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="地址" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.address }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="最大容量" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.maxCapacity }}</span>
            </div>
          </template>
        </el-table-column>
<!--        <el-table-column label="座位分区映射" width="180">-->
<!--          <template #default="scope">-->
<!--            <div style="display: flex; align-items: center">-->
<!--              <span style="margin-left: 10px">{{ scope.row.seatMap }}</span>-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->

        <el-table-column label="处理按钮">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
            v-model:current-page="searchObj.current"
            v-model:page-size="searchObj.size"
            :page-sizes="[10, 20, 30, 50]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>

  <!-- 编辑对话框 -->
  <el-dialog v-model="editWinVisible" :title="obj.id ? '编辑' : '新增'" width="500">
    <el-form :model="obj">
      <el-form-item label="场馆名称" :label-width="100">
        <el-input v-model="obj.venueName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="地址" :label-width="100">
        <el-input v-model="obj.address" autocomplete="off" />
      </el-form-item>
      <el-form-item label="最大容量" :label-width="100">
        <el-input v-model="obj.maxCapacity" autocomplete="off" />
      </el-form-item>
      <el-form-item label="座位分区映射" :label-width="100">
        <el-input v-model="obj.seatMap" autocomplete="off" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editCancel">取消</el-button>
        <el-button type="primary" @click="editCommit">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>




<style scoped>
/* 优化样式，避免图片拉伸、按钮间距异常 */
.avatar-uploader {
  cursor: pointer;
}
.price-tag {
  color: #666;
}
.btn-edit, .btn-delete, .btn-select {
  margin-right: 8px;
}
.pagination-container {
  margin-top: 16px;
  text-align: right;
}
/* 页面容器样式 */
.product-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100%;
  height: auto;
  box-sizing: border-box;
}

/* 页面标题样式 */
.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #1f2329;
  font-size: 20px;
  font-weight: 600;
}

/* 表单容器样式 */
.form-container {
  margin-bottom: 20px;
  border-radius: 6px;
  overflow: hidden;
}

/* 表格容器样式 */
.table-container {
  border-radius: 6px;
  overflow: hidden;
  height: auto;
}

/* 按钮样式 */
.btn-edit {
  margin-right: 5px;
  text-align: center;
}

.btn-delete {
  margin-right: 5px;
  text-align: center;
}

/* 分页容器样式 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  padding-right: 10px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .el-col {
    margin-bottom: 10px;
  }
}

@media (max-width: 768px) {
  .product-container {
    padding: 10px;
  }
  .el-table {
    font-size: 12px;
  }
}
</style>
